﻿@using fqlmoney.Model
@{
    ViewBag.Title = "首页";
    ViewBag.Menu = "index";
    List<user_moneytype> typelist = ViewBag.typelist;
}
@section fqlmoneyCss{
<link href="/Content/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
<style>
    .analysis{
        height: 400px;
    overflow: hidden;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #e3e3e3;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
    }
</style>
    
}
<div class="row">
<div class="col-sm-12">
    <section class="panel panel-default"> 
        <div class="panel-body">
            <div class="form-group pull-in clearfix">
                <div class="col-sm-3">
                    <div class="input-group m-b">
                        <span class="input-group-addon">日期：</span>
                        <input class="form-control input-sm valid" id="dates" name="dates" placeholder="时间不能为空" type="text" value="@ViewBag.date">
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="input-group m-b">
                        <span class="input-group-addon">类型：</span>
                        <select class="form-control" id="type">
                            <option value="0">全部</option>
                            @foreach (var item in typelist)
                            {
                                <option value="@item.t_id">@item.t_name</option>
                            }
                        </select>
                    </div>
                </div>
            </div>
        </div>
        <footer class="panel-footer text-right bg-light lter">
            <div class="row">
                <div class="col-sm-offset-9 col-sm-3 text-right">
                    <button class="btn btn-success querydata">查询</button>
                </div>
            </div>
        </footer>
    </section>
</div>
<div class="col-sm-12">
    <div id="pie-analysis" class="analysis"></div>
    </div>
</div>
        
@section fqlmoneyScript{
<script src="/Content/script/bootstrap-datetimepicker.min.js"></script>
<script src="/Content/script/echarts/echarts.js"></script>
<script type="text/javascript">
    require.config({
        paths: {
            echarts: '/Content/script/echarts'
        }
    });

    require(
        [
            'echarts',
            'echarts/chart/pie'
        ],
        function (ec) {
            var myChart = ec.init(document.getElementById('pie-analysis'));
            var option = {
                title: {
                    text: '@ViewBag.date 月份消费比例图(@ViewBag.totalprice)',
                    x: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c}元 ({d}%)"
                },
                series: [
                    {
                        name: '半径模式',
                        type: 'pie',
                        radius: [20, 110],
                        center: ['50%', 200],
                        roseType: 'radius',
                        width: '40%',       // for funnel
                        max: 40,            // for funnel
                        minAngle:2,
                        data: [
                            @Html.Raw(ViewBag.piedata)
                        ]
                    }
                ]
            };

            myChart.setOption(option);
        }
    );
    $(function () {
        $("#dates").datetimepicker({
            format: 'yyyy-mm',
            weekStart: 1,
            todayBtn: 0,
            autoclose: 1,
            todayHighlight: 1,
            startView: 3,
            minView: 3,
            forceParse: 0
        });
        $(".querydata").click(function () {
            location.href = "/?date=" + $("#dates").val() + "&type=" + $("#type").val();
        });
        $("#type").val(getUrlParam('type') == '' ? 0 : getUrlParam('type'));
    });
    function getUrlParam() {
        /// <summary> 获取url参数 </summary>
        var url, param;
        if (arguments.length == 1) {
            url = location.href;
            param = arguments[0];
        } else {
            url = arguments[0];
            param = arguments[1];
        }
        var re = new RegExp("(\\\?|&)" + param + "=([^&]+)(&|$)", "i"); var m = url.match(re); if (m)
            return m[2]; else
            return '';
    }
</script>

}
